<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="发现与此类似的标签"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :before-close="beforeClose"
    class="tag-edit-dialog tag-similar-dialog"
    width="30%"
    v-dialogMove
  >
    <ul>
      <li v-for="item in similarList" :key="item.tagId">
        <el-row :gutter="20">
          <el-col :span="12" class="tagName">
            <span @click="viewTag(item)">{{ item.tagName }}</span>
          </el-col>
          <el-col :span="12" :class="`status${item.tagStatus}`">
            <span class="tag-status">
              <icon-svg :name="item.tagStatus | iconNameFormatter"></icon-svg>
            </span>
            {{ $dict('tag_status')[item.tagStatus] }}
          </el-col>
        </el-row>
      </li>
    </ul>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="handleSave">保存草稿</el-button>
      <el-button type="primary" @click="submit">仍要提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      similarList: []
    }
  },
  filters: {
    iconNameFormatter(val) {
      let iconName = ''
      switch (val) {
        case 1:
          iconName = 'iconEdit'
          break
        case 10:
          iconName = 'iconEnroll'
          break
        case 30:
          iconName = 'iconDevelop'
          break
        case 50:
          iconName = 'iconOnline'
          break
        case 70:
          iconName = 'iconLock'
          break
      }
      return iconName
    }
  },
  methods: {
    showDialog(list) {
      this.similarList = list
      this.dialogVisible = true
    },
    handleSave() {
      this.$emit('callback', 'save')
      this.beforeClose()
    },
    submit() {
      this.$emit('callback', 'submit')
      this.beforeClose()
    },
    cancel() {
      this.$emit('callback', null)
      this.beforeClose()
    },
    beforeClose() {
      this.similarList = []
      this.dialogVisible = false
    },
    viewTag(item) {
      this.$blank('market-tag', { params: { id: item.tagId } })
    }
  }
}
</script>

<style lang="scss">
.tag-similar-dialog {
  li {
    padding: 0 50px;
    margin: 10px 0;
    position: relative;
    &:before {
      width: 2px;
      content: '';
      background-color: $theme-color;
      position: absolute;
      top: 2px;
      left: 40px;
      bottom: 2px;
    }
    .tagName {
      padding: 5px 0;
      color: $theme-color;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      span {
        cursor: pointer;
      }
    }
    .tag-status {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      margin-right: 10px;
      border-radius: 50%;
      svg {
        width: 15px;
        height: 15px;
        color: #fff;
      }
    }
    .status1 {
      color: #4e5aa4;
      span {
        background-color: #4e5aa4;
      }
    }
    .status10 {
      color: #f8b49d;
      span {
        background-color: #f8b49d;
      }
    }
    .status30 {
      color: #8ac0ee;
      span {
        background-color: #8ac0ee;
      }
    }
    .status50 {
      color: #7ac7c1;
      span {
        background-color: #7ac7c1;
      }
    }
    .status70 {
      color: #a99be8;
      span {
        background-color: #a99be8;
      }
    }
  }
}
</style>
